<!--（教师）添加任务-->
<template>
    <div>
        <page-header :title="page_head" :content="page_head_eng" />
        <page-main>
            <h1>
                <el-page-header content="编辑:" @back="goBack" />
            </h1>
        </page-main>
        <page-main>
            <el-row :gutter="15">
                <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
                         label-position="left"
                >
                    <el-col :span="24">
                        <h1>消息类型:<b :class="task_show?'message_type1':'message_type2'">{{ messageType }}</b></h1>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                        <el-form-item label-width="98px" label="接收班级：" prop="class">
                            <el-select v-model="formData.class" placeholder="请选择接收班级：" multiple clearable
                                       :style="{width: '100%'}"
                            >
                                <el-option v-for="(item, index) in classOptions" :key="index" :label="item.name"
                                           :value="item.id" :disabled="item.disabled"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="task_show" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                        <el-form-item label-width="120px" label="任务结果名：" prop="task_result">
                            <el-input v-model="formData.task_result" placeholder="请输入任务结果名：" clearable :style="{width: '100%'}" />
                        </el-form-item>
                    </el-col>
                    <div>
                        <el-alert
                            title="1.不支持TAB键增加文本缩进，如有需要请手动点击缩进操作"
                            type="warning"
                        />
                        <el-alert
                            title="2.字数统计只统计汉字和单词数量，数字和符号不予以统计"
                            type="warning"
                        />

                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <h1>编辑：</h1>
                            <el-form class="center">
                                <el-form-item label="标题：" prop="message_title">
                                    <el-input v-model="formData.message_title" placeholder="请输入标题" clearable :style="{width: '100%'}" />
                                </el-form-item>
                                <editor v-model="formData.message_detail" />
                            </el-form>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <h1>预览：</h1>
                            <el-card class="box-card" shadow="always">
                                <!--标题预览-->
                                <h2 style="text-align: center;">{{ formData.message_title }}</h2>
                            </el-card>
                            <el-card class="box-card" shadow="always">
                                <!--内容详情预览-->
                                <h2 >内容详情：</h2>
                                <div class="preview" v-html="formData.message_detail" />
                            </el-card>
                            <el-card v-if="task_show" class="box-card" shadow="always">
                                <!--内容详情预览-->
                                <h2 style="color: orange;">
                                    需要提交的任务结果：
                                    <div
                                        style="
                                        text-indent: 2em;
                                        text-decoration: underline;
                                        color: #4598f9;"
                                        v-text="formData.task_result">
                                    </div>
                                </h2>
                            </el-card>
                        </el-col>
                        <el-col :span="24" style="margin: 30px;">
                            <el-form-item size="large">
                                <el-button type="primary" @click="submitForm">提交</el-button>
                                <el-button @click="resetForm">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </div>
                </el-form>
            </el-row>
        </page-main>
    </div>
</template>
<script>
import PageMain from '../../components/PageMain/index'
import api from '../../api'
import {Message} from 'element-ui'
export default {
    name: 'add.task',
    components: {PageMain},
    props: [],
    data() {
        return {
            formData: {
                class: [],
                message_title: null,
                message_detail: null,
                task_result: null,
                message_type: null
            },
            rules: {
                class: [{
                    required: true,
                    type: 'array',
                    message: '请至少选择一个接收班级：',
                    trigger: 'change'
                }],
                task_result: [{
                    required: true,
                    message: '请输入任务结果名：',
                    trigger: 'blur'
                }]
            },
            // 承载所有查询到的班级对象
            classOptions: [],
            page_head: null,
            page_head_eng: null,
            task_show: false,
            messageType: null
        }
    },
    computed: {},
    watch: {},
    created() {
        // 预先加载该账号下管辖的班级数据
        var _this = this
        api.post('theClass/findClasses', {account: this.$store.state.user.account})
            .then(res => {
                _this.classOptions = res.data
            })
        // 取出跳转到该页面后携带的参数，如果参数为空则跳转回原来的页面
        this.formData.message_type = this.$route.query.message_type
        if (this.formData.message_type == null) {
            this.$router.push({path: '/teacher/add_message'})
        }
        // 通过判断传入的消息类型来决定页头内容,以及决定是否渲染“任务”相关的组件
        if (this.formData.message_type == 'task') {
            this.page_head = '添加任务'
            this.page_head_eng = 'Add task'
            this.task_show = true
            this.messageType = '任务'
        } else if (this.formData.message_type == 'notice') {
            this.page_head = '添加通知'
            this.page_head_eng = 'Add notice'
            this.task_show = false
            this.messageType = '通知'
        } else {
            this.page_head = null
            this.page_head_eng = null
            this.task_show = false
            this.messageType = null
        }
    },
    mounted() {},
    methods: {
        submitForm() {
            this.$refs['elForm'].validate(valid => {
                if (!valid) return
                // TODO 提交表单
                this.formData.time = new Date().toLocaleString('chinese', {hour12: false})
                this.$confirm('是否确认发布消息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'success'
                }).then(() => {
                    if (this.formData.message_title == null || this.formData.message_detail == null) {
                        Message.error('请填写“标题”或“消息详情”')
                        return
                    }
                    // 提交消息给后端
                    api.post('/teacherMessage/addMessage', {
                        data: this.formData, account: this.$store.state.user.account})
                        .then(res => {
                            Message.success(res.msg)
                            // 跳转路径
                            this.$router.push({path: '/teacher/manage_message'})
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消发布'
                    })
                })
            })
        },
        resetForm() {
            this.$refs['elForm'].resetFields()
        },
        goBack() {
            this.$router.push('/teacher/add_message')
        }
    }
}

</script>

<style lang="scss" scoped>
    .preview {
        margin-top: 10px;
        // 支持数字和字母换行
        word-break: break-all;
        overflow-x: auto;
        overflow-y: auto;
        min-height: 100px;
        max-height: 530px;
        &::before {
            display: block;
        }
    }
    .center {
        text-align: center;
    }
    .message_type1 {
        color: red;
    }
    .message_type2 {
        color: #4598f9;
    }
</style>
